<template>
  <div class="cat-search-container">
    <div class="main">
      <div style="margin-top: 20px"><InputOne :placeholder="props.desc" v-model="data" /></div>
      <div>
        <ElButton type="primary" class="search-button" style="" @click="handleSearch">搜索</ElButton>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import InputOne from "@/components/InputOne/index.vue";
import { ref, watch } from "vue";
import { ElButton } from "element-plus";

const data = ref({ value: "" });
const emit = defineEmits(["submit"]);
const props = defineProps(["desc"]);

async function handleSearch() {
  emit("submit", data);
}

watch(
  () => props.desc,
  () => {
    data.value.value = "";
  }
);
</script>

<style lang="scss" scoped>
@import "@/css/respondMixin";

.cat-search-container {
  height: 100%;
  .main {
    margin: 0 auto;
    width: 50%;
  }
}

.search-button {
  width: 300px;
  margin: 40px auto;
  display: block;

  @include respond-to("phone") {
    width: 5rem;
  }
}
</style>
